要設定 webpack 讓他可以編譯 Sass, Less, Stylus 也非常容易

因為就像是 css 一樣，Sass, Less ... 都是 webpack 預設認不得的語法

為了要編譯這些語法

還記得昨天的內容嗎？我們就是需要 loader

新增 sass 的 loader 來編譯 .scss

我們這邊搜尋 webpack sass

果真可以找到專門用來編譯 sass 的 sass-loader

點進 sass-loader 的 GitHub 頁面

可以看到詳細的使用教學

安裝 sass-loader

官方上給的安裝指令是

npm install sass-loader node-sass webpack --save-dev

不過因為 webpack 我們之前已經在全域安裝過了

我們這邊可以只安裝 sass-loader 和 node-sass 就好

npm install sass-loader node-sass --save-dev

(之前提過，如果你的 npm 版本是 5 以上，可以不用加 --save-dev)

新增 Sass/Scss 檔案，並 require()

我們這邊將之前 app.js 的內容清空

並新增 style.scss 和 style.sass

我們這邊更改一下 index.html

並用 sass 和 scss 的語法都寫一份檔案出來

將他們都 require() 進我們的 app.js

如果這邊直接使用 webpack 來編譯的話

他會提示我們不認得 sass, scss 的語法

因為我們還沒新增 rules !

在 webpack.config.js 裡新增 scss sass 的 rule

在原本的 webpack.config.js 裡

我們昨天已經新增了跟 .css 有關的 rule

他指定了， .css 的檔案

要先使用 css-loader 編譯成 JavaScript 可讀的物件

再使用 style-loader 加進 index.html 裡

我們這邊在 rules 裡新增一條規則

/\.(scss|sass)$/ 這段正則

會選取到所有結尾是 .sass 或 .scss 的檔案

並使用 sass-loader 去編譯

編譯結果

實際跑起來，會發現編譯失敗了

但是錯誤結果不太一樣

在 style.scss 裡可能看不太出差別

但是 style.sass，已經被編譯成了 css 的格式

只是 webpack 還是認不得原生的 css !

(這是正常的，因為 sass-loader 本來就只是把 sass 編譯成 css)

編譯成功

最後，我們讓 sass-loader 編譯完，一樣去使用 css-loader 和 style-loader 來處理他的結果

webpack.config.js

const path = require('path')

module.exports = {
  entry: "./app.js",

  output: {
    path: __dirname,
    filename: "build.js"
  },

  watch: true,

  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          {
            loader: 'style-loader'
          },
          {
            loader: 'css-loader'
          }
        ]
      },
      {
        test: /\.(scss|sass)$/,
        use: [
          {
            loader: 'style-loader'
          },
          {
            loader: 'css-loader'
          },
          {
            loader: 'sass-loader'
          }
        ]
      }
    ]
  }
}

就能成功編譯了！

明天

其實到這個階段

你已經有辦法獨立設定好 webpack 了！

恭喜你已經邁向了熟悉前端開發生態的第一步

我們後續的文章其實也沒剩下幾篇

我接下來將會想花時間介紹 Babel 這個專案

以及如何使用 Babel 來編譯你的 JavaScript 程式碼

我們明天見！